<template>
  
  <div class="person">
    <h2>姓名: {{ name }}</h2>
    <h2>年龄: {{ age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
  </div>


</template>

<script setup lang="ts" name = 'FindYou'> // 相当于写了setup() {}
import {ref, reactive, toRefs, toRef} from 'vue'

//数据
let person = ref({
  name: '贾金博',
  age: 21
})


let { name, age } = toRefs(person.value)
//方法
function changeName() {
 name.value = 'FindYou'
}
function changeAge() {
  age.value += 1
}

</script>



<style scoped >
.person {
  background-color: pink;
}
button {
  margin: 0 5px;
}
</style>